<template>
  <div class="app-container">
    <div class="container">
      <el-card>
        <el-form :data="queryInfo" label-width="80px">
          <el-row align="middle">
            <el-col :span="6">
              <el-form-item label="关键字" size="mini">
                <el-input
                  v-model="queryInfo.keyword"
                  @keydown.enter.native="searchFn"
                  placeholder="根据编号搜索"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="10" :push="2">
              <el-form-item>
                <el-button size="mini" @click="queryInfo.keyword = ''"
                  >清除</el-button
                >
                <el-button size="mini" type="primary" @click="searchFn"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-alert
            :title="`数据一共${total}条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="190">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="100">
            <template v-slot="{ row }">
              {{ handleType(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="题目编号" width="210">
            <template v-slot="{ row }">
              <div v-for="(item, index) in row.questionIDs" :key="'y' + index">
                <a class="a" href="javascript:;" @click="openDilog(item)">{{
                  item.number
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180">
            <template v-slot="{ row }">
              {{ row.addTime | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <el-table-column prop="" label="操作">
            <template v-slot="{ row }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="delFn(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          background
          @size-change="handleSizeChange"
          @current-change="currentChange"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="queryInfo.pagesize"
          :current-page.sync="queryInfo.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
    <!-- 预览弹窗 -->
    <questionsPreview
      :showDialog.sync="showDialog"
      :DialogData="DialogData"
    ></questionsPreview>
  </div>
</template>

<script>
// 导入组题列表接口
import { randoms, removeRandoms, detail } from "@/api/hmmm/questions";
import questionsPreview from "../components/questions-preview.vue";
export default {
  components: {
    questionsPreview,
  },
  async created() {
    // 调用接口
    this.randomsList();
  },
  data() {
    return {
      showDialog: false,
      formData: {
        inp: "",
      },
      loading: false,
      tableData: [],
      total: 0,
      questionIDs: 0,
      queryInfo: {
        page: 1,
        pagesize: 20,
        keyword: null,
      },
      // 预览弹框数据
      DialogData: {},
    };
  },
  methods: {
    // 渲染表格
    randomsList() {
      this.loading = true;
      randoms(this.queryInfo).then((res) => {
        this.tableData = res.data.items;
        this.total = res.data.counts;
        this.loading = false;
      });
    },
    // 处理分页条数
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.randomsList();
    },
    // 处理当前页数数据
    currentChange(val) {
      this.queryInfo.page = val;
      this.randomsList();
    },
    // 处理搜索
    searchFn() {
      this.randomsList();
    },
    // 处理删除
    delFn(val) {
      this.$confirm("确定删除这条数据吗").then(() => {
        console.log(val);
        removeRandoms(val).then(() => {
          this.$message.success("删除成功!");
          this.randomsList();
        });
      });
    },
    // 处理显示对应的题型
    handleType(type) {
      switch (type) {
        case "1":
          type = "单选";
          break;
        case "2":
          type = "多选";
          break;
        case "3":
          type = "简答";
          break;

        default:
          break;
      }
      return type;
    },
    // 预览弹窗
    openDilog(row) {
      detail(row)
        .then((res) => {
          this.DialogData = res.data;
          console.log(res.data);
        })
        .catch(() => {
          this.$message.error("获取失败");
        });
      this.showDialog = true;
    },
  },
};
</script>

<style scoped lang='sass'>
*
  font-size: 14px
  .a
    color: #0099ff
  .pagination
    margin-top: 20px
    text-align: right
</style>
